<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item
        ><a routerLink="/">{{ 'list.breadcrumb.home' | translate }}</a></d-breadcrumb-item
      >
      <d-breadcrumb-item>{{ 'list.breadcrumb.formPage' | translate }}</d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'list.breadcrumb.cardList' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
    <div class="da-content-banner-title">
      {{ 'list.cardList.title' | translate }}
    </div>
    <div>{{ 'list.cardList.description' | translate }}</div>
  </div>

  <div class="da-content-wrapper">
    <da-layout-row [daGutter]="[24, 24]">
      <da-col-item [daSpan]="24" [daXs]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <d-search [placeholder]="'search'" [(ngModel)]="keyword" (searchFn)="getList()"></d-search>
          </div>

          <div class="da-list-content" dLoading [loading]="busy">
            <d-card *ngFor="let item of cardList" class="card-item">
              <d-card-header>
                <d-avatar dCardAvatar [name]="item.name!" [imgSrc]="item.imgSrc!" [isRound]="true" [width]="28" [height]="28"></d-avatar>
                <d-card-title>{{ item.title }}</d-card-title>
              </d-card-header>
              <d-card-content>
                {{ item.content }}
              </d-card-content>
              <d-card-actions [align]="'start'">
                <div class="card-block" *ngFor="let action of item.actions">
                  <i [class]="action.icon + ' card-icon'"></i><span>{{ action.num }}</span>
                </div>
              </d-card-actions>
            </d-card>
          </div>

          <div class="da-list-footer">
            <d-pagination
              [size]="'sm'"
              [total]="pager.total"
              [(pageSize)]="pager.pageSize"
              [(pageIndex)]="pager.pageIndex"
              [canViewTotal]="true"
              [canChangePageSize]="true"
              [canJumpPage]="true"
              [maxItems]="5"
              [pageSizeOptions]="pageSizeOptions"
              (pageIndexChange)="onPageChange($event)"
              (pageSizeChange)="onSizeChange($event)"
            >
            </d-pagination>
          </div>
        </div>
      </da-col-item>
    </da-layout-row>
  </div>
</div>
